/**
 * 书架函数变量
 * @param {*} obj 
 */
const bookShelf = function (targetObje, bookShelves) {
    console.log(bookShelves)
    targetObje.innerHTML = ''
    if (targetObje.firstChild) {
        console.log("有节点了" + targetObje.firstChild)
    } else {
        const divBox = document.createElement("div")
        const divSearch = document.createElement("div")
        const Searchinput = document.createElement("input")
        const SearchBtn = document.createElement("Button")
        const addBtn = document.createElement("Button")
        const divList = document.createElement("div")


        divSearch.style.border = "1px solid black"
        divSearch.style.padding = "20px"

        divList.style.display = "flex"
        divList.style.flex = "1"

        bookShelves.forEach((item, index) => {
            const divListItem = document.createElement("div")
            const img = document.createElement("img")
            const font = document.createElement("span")
            const caozuoBtn = document.createElement("div")
            const readBtn = document.createElement("button")
            const removeDel = document.createElement("button")


            divListItem.className = "divListItem"
            img.className = "img"
            readBtn.className = "readBtn"
            removeDel.className = "removeDel"

            img.src = item.imageUrl
            font.innerHTML = item.name
            readBtn.innerHTML = "阅读"
            removeDel.innerHTML = "删除"


            //代替hiddenIup
            divListItem.dataset.id = item.index

            divListItem.appendChild(img)
            divListItem.appendChild(font)
            caozuoBtn.appendChild(readBtn)
            caozuoBtn.appendChild(removeDel)
            divListItem.appendChild(caozuoBtn)
            divList.appendChild(divListItem)
        });

        SearchBtn.innerHTML = "搜索"
        SearchBtn.className = "SearchBtn"
        addBtn.innerHTML = "新增"
        addBtn.className = "addBtn"
        divList.className = "divList"




        //创建一个图书列表函数
        targetObje.appendChild(divBox)
        divBox.appendChild(divSearch)
        divBox.appendChild(divList)
        divSearch.appendChild(Searchinput)
        divSearch.appendChild(SearchBtn)
        divSearch.appendChild(addBtn)


        //安装步骤之后进行事件的监听函数
        const readBtns = document.querySelectorAll(".readBtn")
        const removeDels = document.querySelectorAll(".removeDel")


        SearchBtn.addEventListener("click", function () {
            let array = []
            console.log(Searchinput.value)
            //获取到divList元素
            const divListItems = document.querySelectorAll(".divListItem")
            const divListItemsParent = document.querySelector(".divList");
            divListItems.forEach((item,index) => {
                if(item.querySelector("span").innerHTML.includes(Searchinput.value)){
                    array.push(item)
                }
            })
            divListItemsParent.innerHTML = ""
            array.forEach((item,index) => {
                console.log(item)
                divListItemsParent.appendChild(item)
            })

        })


        //监听数据改变
        addBtn.addEventListener("click", function () {
            if (document.querySelector(".TouchDiv")) {
                //如果存在就不新增节点
                return
            }
            console.log("新增内容")
            const root = document.querySelector(".SearchBtn").parentElement.parentElement
            console.log(root)
            root.style.position = "relative"
            const TouchDiv = document.createElement("div")
            TouchDiv.className = "TouchDiv"
            TouchDiv.style.alignItems = "center"
            TouchDiv.style.position = "absolute"
            TouchDiv.style.width = "300px"
            TouchDiv.style.height = "200px"
            TouchDiv.style.marginLeft = "150px"
            TouchDiv.style.marginTop = "-100px"
            TouchDiv.style.backgroundColor = "white"
            //创建一个图片上传的链接
            const imgDiv = document.createElement("div")
            const imgFont = document.createElement("div")
            const imgInput = document.createElement("input")
            const addBtn = document.createElement("button")
            const closeBtn = document.createElement("button")

            const titleDiv = document.createElement("div")
            const titleFont = document.createElement("div")
            const titleInput = document.createElement("input")
            const contentDiv = document.createElement("div")
            const contentFont = document.createElement("div")
            const contentInput = document.createElement("textarea")


            //content
            contentFont.innerHTML = "内容"


            addBtn.innerHTML = "新增"
            closeBtn.innerHTML = "关闭"
            imgFont.innerHTML = "图书图片链接:"
            titleFont.innerHTML = "图书标题"


            TouchDiv.style.position = "relative"
            closeBtn.style.positoin = "absolute"
            closeBtn.style.top = "0px"
            closeBtn.style.left = "0px"
            closeBtn.style.width = "100%"
            imgDiv.appendChild(imgFont)
            imgDiv.appendChild(imgInput)
            titleDiv.appendChild(titleFont)
            titleDiv.appendChild(titleInput)
            contentDiv.appendChild(contentFont)
            contentDiv.appendChild(contentInput)
            TouchDiv.appendChild(closeBtn)
            TouchDiv.appendChild(imgDiv)
            TouchDiv.appendChild(titleDiv)
            TouchDiv.appendChild(contentInput)
            TouchDiv.appendChild(addBtn)
            root.appendChild(TouchDiv)


            closeBtn.addEventListener("click", function () {
                TouchDiv.remove();
            })


            addBtn.addEventListener("click", function () {
                //修改数据，但是不持久化，只要不更新页面就可以了
                //函数传递的对象的引用值
                const imgInputValue = imgInput.value
                const title = titleInput.value;
                const content = contentInput.value
                const index1 = (Number(bookShelves[bookShelves.length - 1].index) + 1)
                bookShelves.push({ index: index1, name: title, imageUrl: imgInputValue, content: content});
                //push之后新增一个元素并退出
                TouchDiv.remove();

                const divListItem = document.createElement("div")
                const img = document.createElement("img")
                const font = document.createElement("span")
                const caozuoBtn = document.createElement("div")
                const readBtn = document.createElement("button")
                const removeDel = document.createElement("button")

                divListItem.className = "divListItem"
                divListItem.dataset.id = index1


                //设置样式和内容
                img.className = "img"
                font.innerHTML = title
                readBtn.innerHTML = "阅读"
                removeDel.innerHTML = "删除"


                divListItem.appendChild(img)
                divListItem.appendChild(font)
                caozuoBtn.appendChild(readBtn)
                caozuoBtn.appendChild(removeDel)
                divListItem.appendChild(caozuoBtn)
                divList.appendChild(divListItem)


                readBtn.addEventListener("click", function () {
                    readBook(t_main, data.bookShelves[index1].content)
                    //事件监听会在第一次触发后自动移除
                }, { once: true })



                removeDel.addEventListener("click", function () {
                    const card = removeDel.closest(".divListItem"); // 最近的祖先
                    if (!card) return; // 容错

                    const id = Number(card.dataset.id);
                    if (isNaN(id)) return;

                    // 从 data 中移除

                    // bookShelves = bookShelves.filter(b => b.index !== id);
                    // console.log(bookShelves)

                    const idx = bookShelves.findIndex(b => b.index === id);
                    if (idx !== -1) bookShelves.splice(idx, 1); // 原数组变了
                    // 从 DOM 中移除
                    card.remove();
                }, { once: true })


            })
        })


        //监听数据修改按钮的事件
        readBtns.forEach((item, index) => {
            item.addEventListener("click", function () {
                readBook(t_main, data.bookShelves[index].content)
                //事件监听会在第一次触发后自动移除
            }, { once: true })
        })


        removeDels.forEach((item, index) => {
            item.addEventListener("click", function () {
                const card = item.closest(".divListItem"); // 最近的祖先
                if (!card) return; // 容错

                const id = Number(card.dataset.id);
                if (isNaN(id)) return;

                // 从 data 中移除,这样子不能修改外部函数的值
                // bookShelves = bookShelves.filter(b => b.index !== id);

                // 找到下标并原地删除,这样子外部的对象也会被修改
                const idx = bookShelves.findIndex(b => b.index === id);
                if (idx !== -1) bookShelves.splice(idx, 1); // 原数组变了
                // 从 DOM 中移除
                card.remove();
            }, { once: true })
        })
    }
}

